import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from 'react-native';

const tabs = [
  {id: '00', title: '精选'},
  {id: '01', title: '视频'},
  {id: '02', title: '社区'},
  {id: '03', title: '新闻'},
  {id: '04', title: '购物'},
  {id: '05', title: '科技'},
  {id: '06', title: '财经'},
  {id: '07', title: '历史'},
  {id: '08', title: '军事'},
];

export default function CustomTab() {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.tabBar}
        horizontal={true}
        showsHorizontalScrollIndicator={false}>
        {tabs.map((tab, index) => (
          <TouchableOpacity
            key={`${tab.id}`}
            style={[styles.tabButton, activeTab === index && styles.activeTab]}
            onPress={() => setActiveTab(index)}>
            <Text
              style={[
                styles.tabText,
                activeTab === index && styles.activeTabText,
              ]}>
              {tab.title}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
  },
  tabBar: {
    flexDirection: 'row',
    flex: 1,
  },
  tabButton: {
    width: 60,
    height: 40,
    alignItems: 'center',
    borderRadius: 40,
    marginRight: 16,
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
  },
  tabText: {
    fontSize: 16,
    lineHeight: 40,
    color: '#000',
  },
  activeTab: {
    backgroundColor: '#1a73e8',
  },
  activeTabText: {
    color: '#fff',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
